<template>
  <main-content :title="isEdit ? '编辑分类' : '添加分类'" back>
    <div class="form-wrapper">
      <el-form
        ref="addGoodsCateRef"
        :model="addGoodsCateForm"
        :rules="formRules"
        :label-width="100"
      >
        <el-form-item prop="name" label="分类名称">
          <el-input
            v-model="addGoodsCateForm.name"
            maxlength="15"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item prop="sort" label="排序">
          <el-input-number v-model="addGoodsCateForm.sort" :step="1" min="0" />
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-switch
            v-model="addGoodsCateForm.status"
            active-text="启用"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item prop="img" label="分类图标">
          <upload
            v-model="addGoodsCateForm.img"
            :limit="1"
            file-path="pointsMall/"
            list-type="picture-card"
          >
            <el-icon>
              <Plus />
            </el-icon>
          </upload>
        </el-form-item>

        <el-form-item prop="remark" label="备注">
          <el-input
            v-model="addGoodsCateForm.remark"
            type="textarea"
            autosize
            placeholder="请输入内容"
            show-word-limit
            maxlength="150"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="save">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </main-content>
</template>

<script setup lang="ts">
import { getCategoryDetail, saveOrUpdateCategory } from "@/api/pointsMall";
import { useMallConfig } from "@/views/pointsMall/compositions/useMallConfig";
import { FormInstance, FormRules } from "element-plus";
import {useCrossPage} from "@/compositions/crossPage/useCrossPage";

const router = useRouter();
const { query } = useRoute();
const { mallConfig } = useMallConfig();

const isEdit = ref(false);

const addGoodsCateRef = ref<FormInstance>();
const addGoodsCateForm = reactive({
  mallId: mallConfig.value.id,
  name: "",
  sort: 1,
  status: 0,
  img: "",
  remark: "",
});

const formRules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: "请输入分类名称",
      trigger: "blur",
    },
  ],
  img: [
    {
      required: true,
      message: "请上传分类图标",
      validator(rule, val, callback) {
        if (!addGoodsCateForm.img) {
          callback(new Error("请上传分类图标"));
        }

        callback();
      },
    },
  ],
});

const save = async () => {
  addGoodsCateRef.value?.validate(async (valid, fields) => {
    if (valid) {
      const rs = await saveOrUpdateCategory(addGoodsCateForm);

      if (rs.code === 200) {
        ElMessage.success("提交成功");
        storeEvent("refreshList")
        router.back();
      } else {
        console.log(fields);
      }
    }
  });
};

const _getCategoryDetail = async () => {
  const id = Number(query.id);
  const rs = await getCategoryDetail({ id });

  if (rs.code === 200) {
    rs.payload &&
      Object.keys(rs.payload).forEach((key) => {
        addGoodsCateForm[key] = rs?.payload?.[key];
      });
  }
};

const {storeEvent} = useCrossPage("pointsMall", {})


onMounted(() => {
  if (query.id) {
    isEdit.value = true;
    _getCategoryDetail();
  }
});
</script>

<style scoped lang="scss">
.form-wrapper {
  width: 600px;
}
</style>
